<template>
	<view class="orderBack">
		<!-- 订单 -->
		<view class="card">
			<view class="order-title">
				订单编号: {{ orderSn }}
			</view>
			<view class="sku-block" v-for="items in list" :key="items.id">
				<image class="img" :src="items.productPic"></image>
				<view class="info">
					<view class="p p1">
						<view class="title">
							{{ items.productName }}
						</view>
						<view class="price">
							¥{{ items.productPrice }}
						</view>
					</view>
					<view class="p p2">
						<view class="text">
							编号：{{ items.productSn }}
						</view>
						<view class="text">
							x {{ items.productQuantity }}
						</view>
					</view>
					<view class="p p3">
						<view class="text" v-for="item in JSON.parse(items.productAttr)" :key="item.key">
							{{ item.key }} : {{ item.value }}
						</view>
					</view>
				</view>
			</view>
			<view class="total-price">
				<view class="text">
					合计: ¥{{ total }}
				</view>
			</view>
		</view>
		<!-- 退货 -->
		<view class="returnGoods">
			<view class="per per1">
				<view class="title">
					请选择退单数量:
				</view>
				<view class="text">
					{{ count }}
				</view>
			</view>
			<view class="per per2">
				<view class="title">
					请输入退货原因:
				</view>
				<input class="ipt" type="text" v-model="reason" placeholder="请输入退货原因" />
			</view>
			<view class="per per3">
				<view class="title">
					请选择退货地址:
				</view>
				<picker @change="bindPickerChange" :value="current" :range="companyAddrssList" range-key="addressName">
					<view class="uni-input">{{ current == -1 ? "请选择退货地址" : companyAddrssList[current].addressName }}</view>
				</picker>
			</view>
			<view class="per per4">
				<view class="title">
					请输入问题描述:
				</view>
				<textarea class="textarea" v-model="description" placeholder="请输入问题描述" />
			</view>
			<view class="per upload">
				<view class="info">
					<view class="title">
						<view class="p1">
							温馨提醒:
						</view>
						<view class="p2">
							上传图片总大小不能超过3m，单个文件大小不能超过1m，图片总个数不能超过3张
						</view>
					</view>
					<view class="uploadImg">
						<view class="uploadBtn" @tap="selectImg">
							<image class="img" src="../../../static/icons/jia.png">
								上传图片
							</image>
						</view>
						<view class="imgList" v-for="(item,index) in imgList" :key="index">
							<view class="box">
								<image class="img" :src="item.path"></image>
								<image class="dels" src="../../../static/icons/shanchus2.png" :draggable="false" @tap="delImg(index)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交 -->
		<view class="btn-sub" @tap="submit">
			提交
		</view>
	</view>
</template>

<script>
	import { getPreOrderById } from "../../../api/order/index.js";
	import { addOrderReturnApply,getCompanyAddrss } from "../../../api/orderPackage/index.js";
	import baseUrl from "../../../api/baseUrl.js";
	import mix from "../../../mixins/index.js";
	export default {
		mixins: [mix],
		data() {
			return {
				list: [], // 订单 - 列表
				imgList: [], // 图片 - 列表
				companyAddrssList: [], // 退单公司 - 列表
				current: -1, // 切换 - 请选择退货地址|退单公司列表
				orderSn: "", // 订单 - 编号
				count: 0, // 退单 - 参数 - 退几个
				reason: "", // 退单 - 参数 - 退货原因,标题
				description: "", // 退单 - 参数 - 问题描述
				proofPics: [], // 退单 - 参数 - 凭证图片，以英文逗号隔开
				companyAddressId: "", // 退单 - 参数 - 退货商家公司地址Id
				orderId: "", // 退单 - 参数 - 商品订单id
				orderItemId: "", // 退单 - 参数 - 商品订单ItemId
			};
		},
		onLoad(options) {
			this.orderId = options.id;
			this.orderItemId = options.skuid;
			// 判断 - 是否登陆
			if(this.checkLogin()){
				// 根据订单id获取订单明细
				getPreOrderById(options.id).then(res=>{
					// 查找 - 需要退单的商品
					this.list = res.data.data.orderItems.filter(ele=>ele.id == options.skuid);
					this.count = this.list[0].productQuantity;
					this.orderSn = res.data.data.orderBase.orderSn
				});
				// 获取退单公司地址
				getCompanyAddrss().then(res=>{
					this.companyAddrssList = res.data.data.items
				})
			}
		},
		computed:{
			// 合计
			total(){
				return this.list.reduce((total,current)=>{
					return total + current.productPrice * current.productQuantity
				},0)
			}
		},
		methods:{
			// 删除图片
			delImg(val){
				this.imgList.splice(val,1)
			},
			// 图片上传
			selectImg(){
				var _this = this;
				uni.chooseImage({
					success(res){
						var img = res.tempFiles;
						// 判断 - 图片总数量是否超出3张
						if( _this.imgList.length + img.length > 3){
							uni.showToast({
								title: "图片总数量超出3张,请重新选择",
								icon: "none"
							})
							return
						};
						// 筛选出图片大小大于1M的图片
						var item = res.tempFiles.find(ele=>ele.size > 1024*1024);
						if(item){
							uni.showToast({
								title: "选择的本地图片大小超出1M,请重新选择",
								icon: "none"
							})
							return
						};
						_this.imgList.push(...img);
					}
				})
			},
			// 请选择退货地址
			bindPickerChange(e){
				this.current = e.detail.value;
				// 筛选出选中的公司
				var item = this.companyAddrssList.filter((ele,index)=>index == e.detail.value)
				// 退货商家公司地址Id
				this.companyAddressId = item[0].id
			},
			// 提交
			submit(){
				var arr = [];
				// 退单图片 - 依次上传
				this.imgList.forEach(ele=>{
					// Promise实例 - 解决axios上传异步问题
					var pro = new Promise((resolve)=>{
						// 上传
						uni.uploadFile({
							url: baseUrl + "/lejuClient/orderReturn/uploadImg",
							filePath: ele.path,
							name: "file",
							success: (res=>{
								resolve(JSON.parse(res.data).data.fileUrl)
							})
						})
					});
					arr.push(pro)
				})
				// Promise实例 - all()方法接受一个数组作为参数
				const p = Promise.all(arr);
				p.then(res=>{
					var obj = {
						"companyAddressId": this.companyAddressId,
						"count": this.count,
						"description": this.description,
						"orderId": this.orderId,
						"orderItemId": this.orderItemId,
						"proofPics": res.join(","),
						"reason": this.reason
					}
					// 申请退单
					addOrderReturnApply(obj).then(res=>{
						if(res.data.success){
							uni.showToast({
								title: "提交退单成功"
							});
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>
